<template>
<div class="person">
  <h1> 中国</h1>
  <h1 ref="title"> 成都</h1>
  <h1> 城职</h1>
  <button @click="ShowLog">展示h2元素</button>
</div>
</template>
<script setup lang="ts" name="person">
import {ref,reactive, computed,watch, watchEffect, defineExpose} from 'vue'
// 创建一个 用于存储ref标记的内容
let title = ref()

let a = ref(1)
let b = ref(2)
let c = ref(3)

const ShowLog =()=>{
  console.log(title.value);
  
}
defineExpose({a,b,c})
</script>

<style scoped>
button {
  margin: 0 5px;
}
.person {
  border-radius: 10px;
  background-color: #8ee6ea;
  margin: 20px;
}
li {
  font-size: 15px;
}
.person input{
  margin-top: 10px;
  margin-bottom: 10px;
}
</style>
